<template>
  <div class="m-choose-area-select-input-width">
    <el-select style="width: 240px" placeholder="请选择省份" v-model="province">
      <el-option
        v-for="(item, index) in allArea"
        :key="item.code"
        :value="item.code"
        :label="item.name"
      ></el-option>
    </el-select>
    <el-select
      :disabled="!province"
      style="width: 240px; margin: 0 10px"
      placeholder="请选择城市"
      v-model="city"
    >
      <el-option
        v-for="(item, index) in selectCity"
        :key="item.code"
        :value="item.code"
        :label="item.name"
      ></el-option>
    </el-select>
    <el-select
      :disabled="!province || !city"
      style="width: 240px"
      placeholder="请选择区域"
      v-model="area"
    >
      <el-option
        v-for="(item, index) in selectAreas"
        :key="item.code"
        :value="item.code"
        :label="item.name"
      ></el-option>
    </el-select>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import allArea from "components/chooseArea/lib/pca-code.json";

export interface AreaItem {
  name: string;
  code: string;
  children?: AreaItem[];
}

export interface Data {
  name: string;
  code: string;
}

let province = ref<string>("");
let city = ref<string>("");
let area = ref<string>("");

let selectCity = ref<AreaItem[]>([]);
let selectAreas = ref<AreaItem[]>([]);

let emits = defineEmits(["change-area"]);

watch(
  () => province.value,
  (newValue) => {
    if (newValue) {
      let cities = allArea.find(
        (item) => item.code === province.value
      )!.children;
      selectCity.value = cities;
    }
    city.value = "";
    area.value = "";
  }
);

watch(
  () => city.value,
  (newValue) => {
    if (newValue) {
      const temp = selectCity.value.find((item) => item.code === city.value);
      let areas = temp!.children!;
      selectAreas.value = areas;
    }
    area.value = "";
  }
);

function getName(list: AreaItem[], code: string) {
    if (!code) return "";
  return list.find((item) => item.code === code)!.name;
}

watch(
  () => area.value,
  (val) => {
    if (!val) return;
    
    let proviceData: Data = {
      code: province.value,
      name: getName(allArea, province.value),
    };
    let cityData: Data = {
      code: city.value,
      name: getName(selectCity.value, city.value),
    };
    let areaData: Data = { code: val, name: getName(selectAreas.value, val) };
    console.log(proviceData, cityData, areaData);
    emits("change-area", {
      province: proviceData,
      city: cityData,
      area: areaData,
    });
  }
);

// let selectCity = computed(() => {
//   if (!province.value) return [];
//   else {
//     let cities = allArea.find((item) => item.code === province.value)!.children;
//     return cities;
//   }
// });

// let selectAreas = computed(() => {
//   if (!city.value) return [];
//   else {
//     let areas = selectCity.value.find((item) => item.code === city.value)!.children;
//     return areas;
//   }
// });
</script>
<style scoped lang="scss"></style>
